@import './variable';

.btn-sidebar {
  bottom: 20px;
  color: var(--color-white);
  cursor: pointer;
  fill: #abc;
  font-size: 32px !important;
  left: 30px;
  position: fixed;
  right: 30px;
  z-index: 100;
}

.sidebar {
  color: var(--color-white);
  font-size: 20px;
  padding: 30px;

  & svg {
    cursor: pointer;
    height: 24px;
    width: 24px;
  }

  & a {
    border: none;
    cursor: pointer;
    color: var(--color-white);

    &:hover {
      color: var(--color-main);
    }
  }

  & > div {
    align-items: center;
    display: flex;
    justify-content: space-around;
    width: 150px;
  }

  & .sidebar-social {
    font-size: 1.7rem;
  }

  & .sidebar-control {
    margin: 30px 0;
  }

  & .sidebar-contents {
    align-items: flex-start;
    flex-direction: column;
    margin: 30px 15px;
    width: auto;

    & > a:not(:first-child) {
      margin-top: 4px;
    }
  }
}
